<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>SlideShow</title>
<link rel="stylesheet" type="text/css" href="podstyle.css" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <script type="text/javascript">

  function toggleCode( id ) {
    if ( document.getElementById )
      elem = document.getElementById( id );
    else if ( document.all )
      elem = eval( "document.all." + id );
    else
      return false;

    elemStyle = elem.style;

    if ( elemStyle.display != "block" ) {
      elemStyle.display = "block"
    } else {
      elemStyle.display = "none"
    }

    return true;
  }
  document.writeln( "<style type=\"text/css\">div.method-source-code { display: none }</style>" )
  </script></head>
<body>
<div class="path">
SlideShow 
</div>
<div>
<a href="src/slidedoc.pod">Source</a>
</div>


<div class="pod">
<!-- INDEX START -->
<h3 id="TOP">Index</h3>
<ul>
	<li><a href="#NAME">NAME</a></li>
	<li><a href="#SYNOPSIS">SYNOPSIS</a></li>
	<li><a href="#METHODS">METHODS</a><br />
<ul>
	<li><a href="#create">create</a><br />
<ul>
	<li><a href="#Parameters">Parameters</a></li>
</ul>
</li>
	<li><a href="#setFocusedIndex">setFocusedIndex</a></li>
	<li><a href="#add">add</a></li>
	<li><a href="#registerCallback">registerCallback</a><br />
<ul>
	<li><a href="#Events">Events</a></li>
</ul>
</li>
	<li><a href="#setup">setup</a></li>
</ul>
</li>
	<li><a href="#PLUGINS">PLUGINS</a><br />
<ul>
	<li><a href="#SpotLight">SpotLight</a></li>
</ul>
</li>
</ul>
<hr />
<!-- INDEX END -->

<h1 id="NAME">NAME <a href="#TOP" class="toplink"><img alt="^" src="up.gif" /></a></h1>

<p>SlideShow - SlideShow builder script.</p>

<h1 id="SYNOPSIS">SYNOPSIS <a href="#TOP" class="toplink"><img alt="^" src="up.gif" /></a></h1>

<pre>  # construct
  var slideshow = SlideShow.create({
    pictureWidth:  100,
    pictureHeight: 100,
    capacity:      5,
    mode:          'horitontal',
  });
  slideshow.setFocusedIndex(2);

  # append pictures
  slideshow.add('/path/to/image');
  slideshow.add('/path/to/image');
  slideshow.add('/path/to/image');

  # build on DOM
  slideshow.setup('slide', 1);

</pre><h1 id="METHODS">METHODS <a href="#TOP" class="toplink"><img alt="^" src="up.gif" /></a></h1>

<h2 id="create">create</h2>

<p>Construct slideshow object. Pass the configuration parameters as JavaScript object notation.</p>

<pre>  var slideshow = SlideShow.create({
    pictureWidth:  100,
    pictureHeight: 100,
    capacity:      5,
    mode:          'horitontal',
  });

</pre><h3 id="Parameters">Parameters</h3>

<dl>
	<dt>pictureWidth</dt>
		<dd><p>Width of the each picture image.</p></dd>
	<dt>pictureHeight</dt>
		<dd><p>Height of the each picture image.</p></dd>
	<dt>capacity</dt>
		<dd><p>How many pictures should be visible in slider.</p></dd>
	<dt>mode</dt>
		<dd><p>&quot;vertical&quot; or &quot;horizontal&quot;, set &quot;horizontal&quot; by default.</p></dd>
</dl>
<h2 id="setFocusedIndex">setFocusedIndex</h2>

<p>Set the index number to define witch position is *focused*. Index number starts at 0.</p>

<pre>  slideshow.setFocusedIndex(2);

</pre><h2 id="add">add</h2>

<p>Append picture images you want to represent within slider.</p>

<pre>  slideshow.add('/img/mypicture.gif');

</pre><p>And optionaly, you can pass metadata as second argument.</p>

<pre>  slideshow.add('/img/cat1.gif', { name: 'John',   age: 8   });
  slideshow.add('/img/cat2.gif', { name: 'Richie', age: 10  });

</pre><p>This is useful in case you want raise some event when the picture is selected.
Callback event is descripted as follows.</p>

<h2 id="registerCallback">registerCallback</h2>

<p>You can set event callback with this method, first argument is event name,
second one is callback function.</p>

<h3 id="Events">Events</h3>

<dl>
	<dt>beforeChange</dt>
	<dt>afterChange</dt>
</dl>
<p>Callback functions first arguments are Array object that contains the
all pictures data. Second is the selected index.
And using 'options' property, you can access to the data you set when you add picture.</p>

<p>For example,</p>

<pre>  slideshow.registerCallback('afterChange', function(pictures, index) {
    var selectedPicture = pictures[index]; 
    alert(selectedPicture.options.name);
    alert(selectedPicture.options.age);
  });

</pre><h2 id="setup">setup</h2>

<p>After all setting, call this method.
First argument is the ID of the element that you want build slider into.
Second is the initial selected picture's index.</p>

<pre>  &lt;div id=&quot;slider&quot;&gt;&lt;/div&gt;

  slideshow.setup('slider', 1);

</pre><p>Attention:
before you invoke this method, the DOM of the target element should be build
by browser. With prototype.js, Event.observe is useful.</p>

<pre>  Event.observe(window, 'load', function() {
    slideshow.setup('elementName', 1);
  });

</pre><p>Another solution, </p>

<pre>  &lt;body onload=&quot;slideshow.setup('elementName', 1)&quot;&gt;

</pre><h1 id="PLUGINS">PLUGINS <a href="#TOP" class="toplink"><img alt="^" src="up.gif" /></a></h1>

<pre>  slideshow.loadPlugin('PluginName');

</pre><h2 id="SpotLight">SpotLight</h2>

<p>Highlighten the selected picture automatically.</p>

<pre>  sideshow.loadPlugin('SpotLight');

</pre>
</div><div class="footer">generated by <a href="http://search.cpan.org/perldoc?Pod%3A%3AProjectDocs">Pod::ProjectDocs</a></div></body>
</html>
